<script setup lang="ts">
	import { reactive, toRefs } from 'vue'
	import { FormRules, FormInstance } from 'element-plus'
	import { categoryList } from '@/api/modules/config'
	import WangEditor from '@/components/WangEditor/index.vue'

	// 表单项类型
	interface FormProps {
		formInput: Record<string, any>
		formRules: FormRules
		formRef: FormInstance
	}

	// 表单项内容
	const state: FormProps = reactive({
		// 表单数据
		formInput: {
			goodsDetailContent: '阿松大加速度的家啊大家'
		},
		// 表单规则
		formRules: {},
		// 表单实例
		formRef: null
	})

	// 商品分类 props选项
	const cateProps = {
		lazy: true, // 开启动态加载
		async lazyLoad(node, resolve) {
			// 1 -> 2  2 -> 3
			// 获取当前点击为类别等级
			const { level, value } = node
			// 初始化 -> 加载1级分类
			const req = { pageSize: 200, pageNumber: 1, categoryLevel: level + 1, parentId: value || 0 }
			const { data } = await categoryList(req)
			// 遍历data.list 为每个对象添加leaf字段
			const list = data.list.map(item => ({ ...item, leaf: level === 2 }))
			resolve(list)
		},
		label: 'categoryName',
		value: 'categoryId'
	}

	const cateChange = value => {
		formInput.value.goodsCategoryId = value[2] || 0
	}

	const { formInput, formRules, formRef } = toRefs(state)
</script>

<template>
	<!-- 动态表单项【表单项配置化】 节省40%时间 摸鱼 -->
	<div class="addGoods">
		<!-- 表单内容 -->
		<el-form :model="formInput" :rules="formRules" ref="formRef" label-width="100px">
			<el-form-item label="商品分类">
				<el-cascader class="w-1/3" :props="cateProps" @change="cateChange" />
			</el-form-item>
			<el-form-item label="商品名称">
				<el-input class="w-1/3" placeholder="请输入商品名称" />
			</el-form-item>
			<el-form-item label="商品简介">
				<el-input class="w-1/3" placeholder="请输入商品简介" />
			</el-form-item>
			<el-form-item label="商品价格">
				<el-input class="w-1/3" placeholder="请输入商品价格" />
			</el-form-item>
			<el-form-item label="商品售卖价">
				<el-input placeholder="请输入商品售卖价" />
			</el-form-item>
			<el-form-item label="商品库存">
				<el-input placeholder="请输入商品库存" />
			</el-form-item>
			<el-form-item label="商品标签">
				<el-input placeholder="请输入商品标签" />
			</el-form-item>
			<el-form-item label="上架状态">
				<el-input placeholder="请输入商品分类" />
			</el-form-item>
			<el-form-item label="详情内容">
				<WangEditor v-model:value="formInput.goodsDetailContent" height="200px" mode="simple" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary">立即创建</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
